<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ message }}</h1>

    <div class="box">

    </div>

    <ul>
      <li v-for="item in chapterList" :key="item.chapterId">
        {{item.chapterTitle}}
        {{item.time}}
      </li>
    </ul>
    <div>
      <input type="input" v-model="chapter" />
      <button @click="sub">提交</button>
    </div>
  </div>
</template>

<!--
  在单页应用中

  1.组件的切换过程
  router-link router-view router

  2.网络请求过程
  axios get post put delete

  3.数据提交
  get请求通过url传递参数
  post请求通过http的请求体向服务端发送数据  axios.post(url,{})

  客户端发起网络请求，服务端根据资源路径接受请求
  接受前端发过来的数据
  ctx.request.body
  ctx.query  ctx.params

  服务端接收数据成功后，返回给前端操作结果或状态
-->

<script>
import axios from 'axios';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      message:'',
      chapterList:[],
      chapter:'333'
    }
  },
  methods:{
    getList() {
      axios.get('http://localhost:3000/getList').then(res => {
        this.chapterList = res.data;
      })
    },
    sub() {
      console.log(this.chapter)
      axios.post('http://localhost:3000/sub',{"chapter":this.chapter}).then(res => {
        if(res.data === 'ok'){
          let chapterObj = {
            chapterId:this.chapterList.length,
            chapterTitle:this.chapter,
            time:'2023-3-3'
          }

          this.chapterList.push(chapterObj)
        }

        console.log(res.data)
      })
    }
  },
  mounted() {
    axios.get('http://localhost:3000/getdata').then(res => {
      console.log(res)
      this.message = res.data;
    });

    this.getList();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.box{
  width: 100px;
  height: 100px;
  border: 1px solid #42b983;
  margin: 0 auto;

  background-image: url('../../spirte/bg.png');
  background-repeat: no-repeat;
  background-position: -300px -300px;
}
</style>
